<!-- 标签模版 -->
<template>
  <div class="container">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="盒标签" name="box">
        <!-- 盒标签的模版=============================== -->
        <boxTemplate ref="boxTemplate"> </boxTemplate>
      </el-tab-pane>
      <el-tab-pane label="档案标签" name="archive">
        <!-- 档案标签的模版=============================== -->
        <archiveTemplate ref="archiveTemplate"></archiveTemplate>
      </el-tab-pane>
      <el-tab-pane label="层架标签" name="shelf">
        <!-- 层架标签的模版=============================== -->
        <shelfTemplate ref="shelfTemplate"></shelfTemplate>
      </el-tab-pane>
      <el-tab-pane label="背脊模版" name="Backbone">
        <Backbone ref="Backbone"></Backbone>
      </el-tab-pane>
      <el-tab-pane label="封面模版" name="cover">
        <cover ref="cover"></cover>
      </el-tab-pane>
      <el-tab-pane label="目录模版" name="catalog">
        <catalog ref="catalog"></catalog>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { queryCatalogueTemp, queryCoverTemp, queryFieldArchive, queryFieldBox } from '@/api/sys/template'
import boxTemplate from '@/views/Setting/shelfDefine/boxTemplate.vue'
import archiveTemplate from '@/views/Setting/shelfDefine/archiveTemplate.vue'
import shelfTemplate from '@/views/Setting/shelfDefine/shelfTemplate.vue'
import Backbone from '@/views/Setting/shelfDefine/Backbone.vue'
import catalog from '@/views/Setting/shelfDefine/catalog.vue'
import cover from '@/views/Setting/shelfDefine/cover.vue'

export default {
  name: 'ShelfDefine',
  components: { boxTemplate, archiveTemplate, shelfTemplate, Backbone, catalog, cover },

  data() {
    return {
      activeName: 'box',
      fontFamilyOptions: [
        {
          label: '宋体',
          value: '宋体',
        },
        {
          label: '黑体',
          value: '黑体',
        },
        {
          label: '楷体',
          value: '楷体',
        },
        {
          label: '仿宋',
          value: '仿宋',
        },
        {
          label: '隶书',
          value: '隶书',
        },
        {
          label: '幼圆',
          value: '幼圆',
        },
      ],
      // ===================档案盒=====================
      // ===================档案=====================

      // ===================层架=====================

      // ===================背脊=====================
      BackboneForm: {},
      // ===================封面=====================
      // ===================目录=====================
    }
  },
  watch: {
    activeName(newVal) {
      switch (newVal) {
        case 'archive':
          this.$refs.archiveTemplate.queryArchiveTemp()
          this.$refs.archiveTemplate.queryRFIDFieldArchive()
          break
        case 'box':
          this.$refs.boxTemplate.queryBoxTemp()
          this.$refs.boxTemplate.queryRFIDFieldBox()

          break
        case 'shelf':
          this.$refs.shelfTemplate.queryShelfTemp()
          this.$refs.shelfTemplate.queryShelfLabelMeta()
          break
        case 'Backbone':
          this.$refs.Backbone.queryBackSpineTemp()
          this.$refs.Backbone.queryFieldBox()
          break
        case 'cover':
          this.$refs.cover.queryCoverTemp()
          this.$refs.cover.queryFieldBox()
          break

        case 'catalog':
          this.$refs.catalog.queryCatalogueTemp()
          this.$refs.catalog.queryFieldArchive()
      }
    },
  },
  created() { },
  mounted() {
    this.$refs.boxTemplate.queryBoxTemp()
    this.$refs.boxTemplate.queryRFIDFieldBox()
  },

  methods: {
    // handleClick(tab, event) {
    //   if (tab.name === 'archive') {
    //     this.archiveTableData = []
    //     this.queryArchiveTemp()
    //   } else if (tab.name === 'box') {
    //     this.boxTableData = []
    //   } else if (tab.name === 'shelf') {
    //     this.shelfTableData = []
    //     this.queryShelfTemp()
    //   } else if (tab.name === 'cover') {
    //     this.queryCoverTemp()
    //   } else if (tab.name === 'catalog') {
    //     this.queryCatalogueTemp()
    //   }
    // },

    // 获取封面模版的数据
    queryCatalogueTemp() {
      queryCatalogueTemp().then()
    },
    // 获取目录模版的数据
    queryCoverTemp() {
      queryCoverTemp().then()
    },
  },
}
</script>

<style lang="less" scoped>
.el-tabs--border-card>.el-tabs__content {
  padding: 7px;
}

.el-card__body {
  height: 8.5rem
    /* 500/192 */
  ;
}

.labelWidth {
  width: 100%;
}

.tableWidth {
  width: 80%;
}

.example {
  display: flex;
  flex-direction: column;

  .el-form-item__content {
    margin: 10px 0 0 10px !important;
  }
}

.fieldsTable {
  .el-form-item__content {
    margin: 0 0 0 10px !important;
  }
}

.el-skeleton__item {
  display: block;
  height: 20px;
}

.rotate90deg {
  transform: rotate(90deg);
  transform-origin: 50px 50px;
  width: 70%;
}

.square {
  height: 300px;
}
</style>
